<%@ include file="template/CommonHeader.jsp" %>
<link href="/FMTOOL_WEB/resources/plugins/forms/select/select2.css" type="text/css" rel="stylesheet" />
    <div id="wrapper">
        <%@ include file="template/LeftNavigator.jsp" %>


        <!--Body content-->
        <div id="content" class="clearfix">
            <div class="contentwrapper"><!--Content wrapper-->

                <%@ include file="template/PageHeader.jsp" %>

                <!-- Build page from here: -->
                 <div class="row-fluid">

                        <div class="span12">

                            <div class="box">

                                <div class="title">

                                    <h4>
                                        <span>New User Form</span>
                                    </h4>
                                    
                                </div>
                                <div class="content">
                                   
                                    <form class="form-horizontal" id="form-addUser" action="saveUser.action"  method="post">										
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="user.userId">UserId<font style="color:red">*</font></label>
                                                    <input class="span7" type="text" value="<s:property value='user.userId' />" name="user.userId" id="userId" onBlur="vaidateUserid(this.value)" />						
                                                    <label class="span2" id="userIdDiv" style="float:right;"></label>
													
                                                </div>
                                            </div>
                                        </div>
										
										 <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="user.password">Password<font style="color:red">*</font></label>
                                                    <input class="span9" type="password"  value="<s:property value='user.password'/>" name="user.password" id="password" />
                                                </div>
                                            </div>
                                        </div> 
										
										
										
                                        
										<div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="user.userName">User Name<font style="color:red">*</font></label>
                                                    <input class="span9" type="text" value="<s:property value='user.userName' />" name="user.userName" id="userName" />
                                                </div>
                                            </div>
                                        </div>
										
										
										
										<div class="form-row row-fluid">
												<div class="span12">
													<div class="row-fluid">
														<label class="form-label span3" for="required">Active?</label>
														<input type="radio" name="user.isActive" id="isActiveYes" value="1" checked="checked" />&nbsp;&nbsp;Active
														<input type="radio" name="user.isActive" id="isActiveNo" value="0"   />&nbsp;&nbsp;Inactive
													</div>
												</div>
										</div>
										
										<div class="form-row row-fluid">
												<div class="span12">
													<div class="row-fluid">
														<label class="form-label span3" for="user.userTypeId">Role</label>
														 <div class="span9 controls sel">   
															<select  name="user.userTypeId" id="userTypeId" class="nostyle" style="width:100%;">
	                                                            <option></option>
																<s:iterator value="%{#application.ALL_ROLE}" id="roleList">
														     	  <option value="<s:property value="roleId" />"><s:property value="roleName" /></option>
														     	</s:iterator>
	                                                        </select>
                                                         </div>
													</div>
												</div>
										</div>
										
										
										
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <div class="form-actions">
                                                    <div class="span3"></div>
                                                    <div class="span9 controls">
                                                        <button type="submit" name="submit" class="btn marginR10" value="Submit">Save changes</button>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div> 
                                        </div>
                                    </form>
                                 
                                </div>

                            </div><!-- End .box -->

                        </div><!-- End .span12 -->

                    </div><!-- End .row-fluid -->  
                
                <!-- End .row-fluid -->

                
            </div>
            <!-- End contentwrapper -->
        </div><!-- End #content -->
    
    </div><!-- End #wrapper -->
    
<%@ include file="template/CommonJS.jsp" %>    
	 <script type="text/javascript">
	 
	  function vaidateUserid(userId)
	  {
	    if(userId!="")
	    {
	  	$("#userIdDiv").html("<img src='/FMTOOL_WEB/resources/images/loaders/horizontal/006.gif' alt='loading...' border='0' />");
			  		  var x= $.ajax({
    		  		  url: "validateUserId.action",
			  		  type: 'POST',
		      		  async: false,
			  		  data: "userId=" + $("#userId").val()
			  		  }).responseText;
				
					  if(x.indexOf("Available")>=0){$("#userIdDiv").html("<font color='green'>Available</font>");}					    
					  else
						{
						 $("#userId").val("");$("#userIdDiv").html("<font color='red'>Not Available</font>");
						}
		}
						

	  }
				$(document).ready(function() { 		
					$("#userTypeId").select2();
					$('#userTypeId').select2({placeholder: "Select"});
					
					$("#form-addUser").validate({
    					ignore: null,
    					ignore: 'input[type="hidden"]',
    					rules: {					  			
							"user.userId": "required",
					  		"user.password": {required: true, minlength: 4},
							"user.userName": "required",
							"user.userTypeId":{
                    			required: function(element) {
                        		if( $("#userTypeId").val() =='none'){
                            		return false;
                        		}else{
                            		return true;
                        		}

                    			}
                			}
						},
						messages: {
									"user.userId": {
										required: "UserId is required"
									},
									"user.password": {
										required: "Please provide a password",
										minlength: "Your password must be at least 4 characters long"
									},
									"user.userName": {
										required: "User Name is required"
									},
									"user.userTypeId": { required:"Please select User Type" }
						}
    			});

	});//End document ready functions



	</script>
<%@ include file="template/CommonFooter.jsp" %>    

 